<template>
  <div>
    <div>
      <icon-page @onSearch="onSearch" @onReset="onReset" :isaddClassify="isaddClassify"
      />
    </div>

    <el-table :data="cates" style="width: 100%" row-key="id">
      <el-table-column prop="cateName" label="名称" />

      <el-table-column prop="enabl" label="状态">
        <template #default="{ row }">
          <el-switch
            @change="change_bool(row.id, row.enabl)"
            v-model="row.enabl"
            inline-prompt
            active-text="显示"
            inactive-text="隐藏"
          />
        </template>
      </el-table-column>

      <el-table-column prop="sort" label="排序" />

      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" @click="isredactClassify(row.id)">
            <el-icon class="el-icon--right">
              <EditPen />
            </el-icon>
          </el-button>
          <el-button type="primary" color="#FF4949" @click="remove(row.id)">
            <el-icon class="el-icon--right">
              <Delete />
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="addClassify" title="新增分类" width="500px">
      <cate-add :cates="cates" />
    </el-dialog>

    <el-dialog v-model="redactClassify" title="编辑分类">
      <cate-update :cates="cates" :cateId="cateId"/>
    </el-dialog>

  </div>
</template>

<script>
import { fatchCates, fatchUpdateCate, fatchDelCate } from '@a/cateLists'
import IconPage from '@c/Xiaolei'
import CateAdd from './components/CateAdd.vue'
import CateUpdate from './components/CateUpdate.vue'
export default {
  name: 'CateLists',
  data () {
    return {
      cateId: -1, // 修改商品的id
      addClassify: false,
      redactClassify: false,
      cates: [],
      formInline: {
        user: ''
      }
    }
  },
  methods: {
    isaddClassify () {
      // 新增弹窗打开关闭
      this.addClassify = true
    },
    isredactClassify (id) {
      // 修改弹窗打开关闭
      this.redactClassify = true
      this.cateId = id
    },
    onReset (formInline) {
      this.formInline = formInline
      this.fatchCates()
    },
    onSearch (formInline) {
      this.formInline = formInline
      this.fatchCates()
      this.formInline.user = ''
    },
    remove (id) {
      this.$confirm('确定删除吗,如果存在下级节点则一并删除，此操作不能撤销').then(() => {
        fatchDelCate({
          id
        }).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              deration: 1500
            })
            this.fatchCates()
          }
        })
      })
    },
    change_bool (id, enabl) {
      // 行内修改商品分类选中状态  发请求修改
      console.log(id, enabl)
      fatchUpdateCate({ id, enabl }).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            deration: 1500
          })
          this.fatchCates()
        }
      })
    },
    fatchCates () {
      fatchCates({
        ...this.formInline
      }).then((res) => {
        if (res.data.code === 200) {
          this.cates = res.data.data.lists
        }
      })
    }
  },
  created () {
    this.fatchCates()
  },

  components: {
    IconPage,
    CateAdd,
    CateUpdate
  }
}
</script>

<style lang="scss" scoped></style>
